<template>
  <div class="order-summary-pane">
    <a-row>
      <a-col :span="item.span" v-for="(item, index) in computedSummaryList" :key="index">
        <field-item layout="flex" :labelWidth="item.labelWidth" :marginBottom="item.marginBottom" :label="item.label">
          <template v-if="item.slotName">
            <slot :name="item.slotName"></slot>
          </template>
          <template v-else>{{ item.value || '-' }}</template>
        </field-item>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    summaryList: {
      type: Array,
      default: () => [],
    },
  })

  const computedSummaryList = computed(() => {
    let summaryList = props.summaryList
    let list = []
    summaryList.forEach((summaryItem, summaryItemIndex) => {
      summaryItem.forEach((item, index) => {
        let span = item.span
        if (!span) {
          if (summaryItem.length == 3) {
            span = index == 0 ? 12 : 6
          }
          if (summaryItem.length == 2) {
            span = index == 0 ? 12 : 12
          }
          if (summaryItem.length == 1) {
            span = 24
          }
        }
        let temp = {
          ...item,
          labelWidth: index == 0 ? 160 : item.labelWidth || 100,
          span,
          marginBottom: !(summaryItemIndex == summaryList.length - 1),
        }
        list.push(temp)
      })
    })
    return list
  })
</script>

<style lang="less" scoped>
  .order-summary-pane {
    :deep {
      .field-label {
        width: 200px;
        display: inline-block;
        text-align: right;
      }
    }
  }
</style>
